4. Designing

4.1. Product Storyboard


This would be the basic layout of the final product. The difference between this and the prototype is the use of a horizontal menu bar rather than a vertical menu bar, drop down menus using Sprymenus and a proper banner.

storyboard.jpg
storyboard.jpg



Layout of the specifications pages for the Evolution and Ralliart:

specifications_storyboard.jpg
specifications_storyboard.jpg



Layout of the range pages for the Evolution and Ralliart:

range_storyboard.jpg
range_storyboard.jpg



The layout for the image gallery:

image_storyboard.jpg
image_storyboard.jpg



The layout for the video page:

video_storyboard.jpg
video_storyboard.jpg



As for the other pages, the layout is exactly the same as the homepage (which is the first picture shown on this list).


The sitemap:

sitemap.jpg
sitemap.jpg


4.2. Dataflow Diagram

The dataflow diagram below shows how the webpage will load in a user's browser:

DFD.jpg
DFD.jpg



4.3. Completed Product

The completed website can be viewed via this link: http://users.tpg.com.au/cm34448/index.htm

The following are some screenshots of the website:


The Lancer Evolution X specifications page
sample_image01.jpg
sample_image01.jpg



The image gallery
sample_image02.jpg
sample_image02.jpg



The video page
sample_image03.jpg
sample_image03.jpg